<template>
  <div>
    <DynamicTable
      ref="dynamicTableRef"
      row-key="id"
      :header-title="$t('routes.system.system.service.apis')"
      :data-request="loadData"
      :columns="columns"
      bordered
      size="small"
      :showIndex="false"
      :fetch-config="{ listField: 'data', totalField: 'total' }"
    >
    </DynamicTable>
  </div>
</template>
<script lang="tsx" setup>
  import { ref } from 'vue'
  import { DynamicTable } from '@/components/core/dynamic-table'
  import type { TableColumn } from '@/components/core/dynamic-table'
  import { useI18n } from '@/hooks/useI18n'
  import { getAllApi } from '@/api/middleSystem'

  defineOptions({
    name: 'Apis',
  })

  const { t } = useI18n()
  const dynamicTableRef = ref<InstanceType<typeof DynamicTable>>()

  /**
   * 表格列
   */
  const columns: TableColumn<any>[] = [
    {
      title: '服务唯一标识',
      dataIndex: 'appId',
      hideInTable: true,
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '地址',
      dataIndex: 'pathStr',
      customRender: ({ record }) => {
        return record.url
      },
    },
    {
      title: '方法',
      dataIndex: 'method',
      hideInSearch: true,
    },
    {
      title: '描述',
      dataIndex: 'description',
      hideInSearch: true,
    },
  ]

  /**
   * 加载数据
   */
  const loadData = async params => {
    const { appId, name, pathStr, pageIndex, pageSize } = params
    console.log(params)
    const data = await getAllApi(pageIndex, pageSize, {
      appId: appId,
      name: name,
      pathStr: pathStr,
    })
    return data
  }
</script>
